import { Speaker224Filled, SpeakerOff24Filled, ErrorCircle24Filled, QuestionCircle24Filled  } from '@vicons/fluent'

import { useThemeVars, NPopover, NFlex, NIcon, NButton } from 'naive-ui'
import { useMainStore } from './tableStore'
import { mergeByKey } from '@/utils/index'

import type { InternalRowData } from 'naive-ui/es/data-table/src/interface'
import type { PaginationProps } from 'naive-ui'
import type { Row as DataRow, Columns } from './index'

export type RemoveHandle<Row> =  (row: Row) => void

export type SetRows<Row> =  (rows: Row[]) =>  void

export type LoadDataHandle<Row> = (page: PaginationProps, setRows: SetRows<Row>) => void

export type Params<Row> = {
  removeHandle?: RemoveHandle<Row>
  loadDataHandle?: LoadDataHandle<Row>
  loadMounted?: boolean,

}

const defaultParam = { loadMounted: true }

function useTable<Row extends { filePath: string } & InternalRowData & DataRow> (params: Params<Row> = {}) {

  const { removeHandle, loadDataHandle, loadMounted } = {...defaultParam, ...params}
  const rows: Ref<Row[]> = ref([])
  const pageInfo: Ref<PaginationProps> = ref({})
  const loading = ref(false)

  const removeRow : RemoveHandle<Row> = removeHandle ? removeHandle : (row) => {
    const index = rows.value.findIndex(item => {
      return row.filePath === item.filePath
    })
    rows.value.splice(index, 1)
  }

  const themeVers = useThemeVars();

  const mainStore = useMainStore();
  // ComputedRef
  const columns: ComputedRef<Columns<Row>>  = computed(() => {
    return mergeByKey(mainStore.columns, [{
      key: 'audio',
      render(row: Row) {
        if (!row.audio?.hasOwnProperty('code')) {
          return (<NPopover trigger={'hover'} v-slots={{
            default: () => '未检测',
            trigger: () => (<NFlex align={'center'} justify={'center'}><NIcon size={24} component={QuestionCircle24Filled}></NIcon></NFlex>)
          }} />);
        } else if (row.audio.code === 0) {
          return (<NPopover trigger={'hover'} v-slots={{
            default: () => row.audio?.message,
            trigger: () => (<NFlex align={'center'} justify={'center'}><NIcon color={themeVers.value.errorColor} size={24} component={SpeakerOff24Filled}></NIcon></NFlex>)
          }} />);
        } else if (row.audio.code === 1) {
          return (<NPopover trigger={'hover'} v-slots={{
            default: () => row.audio?.message,
            trigger: () => (<NFlex align={'center'} justify={'center'}><NIcon color={themeVers.value.successColor} size={24} component={Speaker224Filled}></NIcon></NFlex>)
          }} />);
        } else {
          (<NPopover trigger={'hover'} v-slots={{
            default: () => row.audio?.message,
            trigger: () => (<NFlex align={'center'} justify={'center'}><NIcon size={24} component={ErrorCircle24Filled}></NIcon></NFlex>)
          }} />);
        }
      }
    },
    {
      key: 'active',
      render(row: Row) {
        return (
          <NFlex align={'center'} justify={'center'}>
            <NButton size="small" onClick={ () => removeRow(row) }>删除</NButton>
          </NFlex>)
      }
    }])
  })

  const setData: SetRows<Row> = (newData) => {
    rows.value = newData
    loading.value = false
  }

  const reloadData = () => {
    loading.value = true
    loadDataHandle?.(pageInfo.value, setData)
    loading.value = false
  }

  onMounted(() => {
    loadMounted && reloadData();
  })

  const clearRows = () => {
    rows.value = []
  }

  return {
    loading,
    rows,
    columns,
    reloadData,
    removeRow,
    clearRows
  }
}

export default useTable;
